<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎯 简单 renderHeader 测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/naive-ui/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/naive-ui/dist/index.css">
</head>
<body>
    <div id="app">
        <h2>🎯 最简单的 renderHeader 测试</h2>
        
        <n-data-table :columns="columns" :data="data" />
        
        <div style="margin-top: 20px; background: #f5f5f5; padding: 10px;">
            <p><strong>期望结果：第一列表头应该显示 "🎯 自定义ID"</strong></p>
            <p>如果看到这个文本，说明 renderHeader 工作；如果只看到 "ID"，说明 renderHeader 没有生效</p>
        </div>
    </div>

    <script>
        const { createApp, h } = Vue;
        
        createApp({
            setup() {
                const data = [
                    { id: 1, name: '测试1' },
                    { id: 2, name: '测试2' }
                ];
                
                const columns = [
                    {
                        title: 'ID',
                        key: 'id',
                        renderHeader: () => {
                            console.log('🎯 renderHeader 被调用了！');
                            return h('span', { style: { color: 'red', fontWeight: 'bold' } }, '🎯 自定义ID');
                        }
                    },
                    {
                        title: '名称',
                        key: 'name'
                    }
                ];
                
                console.log('🚀 组件初始化完成');
                
                return { data, columns };
            }
        }).mount('#app');
    </script>
</body>
</html>